<!DOCTYPE html>
<html>
<head>
    <title>情报板管理</title>
    <link rel="icon" href="/assets/images/icons/logo.png">
    <meta charset="utf-8">
    <script src="/assets/jquery/jquery-3.1.1.min.js"></script>
    <script src="/assets/layui-2.9.18/layui.js"></script>
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/layui.css">
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/admin.css">
    <script src="/assets/september/common.js"></script>
    <script src="/assets/september/htmlBuilder.js"></script>
    <script src="/assets/september/search.js"></script>
    <link rel="stylesheet" href="/assets/pages/list.css">
    <link rel="stylesheet" href="/assets/pages/form.css?1">
    <style>
        .width-80 {
            width: 80px !important;
        }

        .width-100 {
            width: 100px !important;
        }

        .width-150 {
            width: 150px !important;
        }
    </style>
    <script>
        function goUrl(url) {
            window.open(url, "_self");
        }
    </script>
</head>
<body>
<div>
    <ul class="layui-nav" style="background: #394574;padding: 0 150px 0 150px">
        <li class="layui-nav-item">
            <a href="javascript:void(0)" onclick="goUrl('/log/log')">
                <cite style="color:white;">日志管理</cite></a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:void(0)" onclick="goUrl('/led/flashList')">
                <cite style="color:rgb(128,128,128);">情报板管理</cite></a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:void(0)" onclick="goUrl('/camera/cameraList')"> <cite
                        style="color:white;">相机管理</cite></a>
        </li>
    </ul>
</div>
<div class="layui-card-body" style="height: 200px;padding: 30px 30px 0 30px">
    <div style="padding-bottom: 10px">
        <button class="layui-btn layuiadmin-btn-list" onclick="addLed()">新增情报板</button>
    </div>
    <div id="form" class="layui-table-box layui-form">
        <table id="LAY-app-content-list" lay-filter="LAY-app-content-list" class="layui-table">
            <tr>
                <td><span>id</span></td>
                <td><span>情报板ip</span></td>
                <td><span>端口</span></td>
                <td><span>关联车道</span></td>
                <td><span>是否启用</span></td>
                <td><span>操作</span></td>
            </tr>
            <tbody class="layui-table-body layui-table-main">
            <tr class="listLed" style="display: none">
                <td><span>$[id]</span></td>
                <td><span>$[host]</span></td>
                <td><span>$[port]</span></td>
                <td><span>$[lanes]</span></td>
                <td><span script="true">$[enableFlag]==1?'启用':'停用'</span></td>
                <td data-minwidth="120">
                    <div class="layui-table-cell">
                        <span show="$[enableFlag]==0"><a class="layui-btn layui-btn-normal layui-btn-xs"
                                                         onclick="changeFlag($[id],1)">启用</a></span>
                        <span show="$[enableFlag]==1"><a class="layui-btn layui-btn-normal layui-btn-xs"
                                                         onclick="changeFlag($[id],0)">停用</a></span>
                        <span><a class="layui-btn layui-btn-danger layui-btn-xs"
                                 onclick="deleteLed($[id],'Led')">删除</a></span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="layui-card-body" style="height: 600px;padding: 30px 30px 0 30px">
    <div style="padding-bottom: 10px">
        <button class="layui-btn layuiadmin-btn-list" onclick="addFlash()">新增节目</button>
    </div>
    <div id="form" class="layui-table-box layui-form">
        <table id="LAY-app-content-list" lay-filter="LAY-app-content-list" class="layui-table">
            <tr>
                <td><span>id</span></td>
                <td><span>节目名称</span></td>
                <td><span>节目类型</span></td>
                <td><span>显示时间</span></td>
                <td><span>显示顺序</span></td>
                <td><span>led坐标尺寸</span></td>
                <td><span>应用情报板</span></td>
                <td><span>操作</span></td>
            </tr>
            <tbody class="layui-table-body layui-table-main">
            <tr class="listFlash" style="display: none">
                <td><span>$[id]</span></td>
                <td><span>$[flashName]</span></td>
                <td><span script="true">getFlashType('$[flashType]')</span></td>
                <td><span>$[waitTime]</span></td>
                <td><span>$[sequence]</span></td>
                <td><span>$[x],$[y],$[w],$[h]</span></td>
                <td><span>$[ledIps]</span></td>

                <td data-minwidth="120">
                    <span><a class="layui-btn layui-btn-normal layui-btn-xs" onclick="editFlash($[id])">编辑</a></span>
                    <span><a class="layui-btn layui-btn-normal layui-btn-xs" href="/led/design?id=$[id]"
                             target="_blank">设计</a></span>
                    <span><a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteLed($[id],'Flash')">删除</a></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    layui.config({
        base: '../../../assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'form'], function () {
        $('td').attr('align', 'center')
        listData("listLed");
        listData("listFlash");
    });

    function addLed() {
        layer.open({
            maxmin: true,
            type: 2,
            title: '添加情报板',
            area: ['50%', '80%'],
            content: '/led/addLed'
        });
    }

    function addFlash() {
        layer.open({
            maxmin: true,
            type: 2,
            title: '添加节目',
            area: ['50%', '80%'],
            content: '/led/addFlash'
        });
    }

    function editFlash(id) {
        layer.open({
            maxmin: true,
            type: 2,
            title: '修改节目',
            area: ['50%', '80%'],
            content: '/led/editFlash?id=' + id
        });
    }

    function changeFlag(id, flag) {
        sajax({
            type: "POST",
            url: "/led/changeEnableFlag",
            data: {id: id, enableFlag: flag},
            success: function () {
                location.reload()
            }
        });
    }

    function deleteLed(id, table) {
        confirmDelete(function () {
            sajax({
                type: "POST",
                url: "/led/delete" + table + "?id=" + id,
                success: function (data) {
                    location.reload()
                    layer.msg('删除成功');
                }
            });
        });
    }

    function listData(name) {
        sajax({
            type: "POST",
            url: '/led/' + name,
            data: {},
            dataType: 'json',
            success: function (data) {
                console.log(data)
                if (data.length > 0) {
                    buildHtmlWithJsonArray(name, data, false, false);
                } else {
                    layer.msg('节目单为空')
                }
            }
        });
    }

    function getFlashType(flashType) {
        if (!flashType) return ""
        if (flashType === 'info') {
            return '宣传';
        } else if (flashType === 'warn') {
            return '告警';
        } else if (flashType === 'pass') {
            return '过车';
        } else {
            return ""
        }

    }

</script>


</body>
</html>
